<template>
<div class="amis-scope">
  <div class="amis-routes-wrapper">
    <div class="antd-Page">
      <div class="antd-Page-content">
        <div class="antd-Page-main">
          <div class="antd-Page-header">
            <h2 class="antd-Page-title"><span class="antd-TplField"><span>投诉建议回复</span></span></h2>
          </div>
          <div class="antd-Page-body">
            <a-card :bordered="false">
              <detail-list title="联系信息">
                <detail-list-item term="姓名">{{detail.name}}</detail-list-item>
                <detail-list-item term="性别">
                  <template v-if="detail.sex==0">女</template>
                  <template v-if="detail.sex==1">男</template>
                </detail-list-item>
                <detail-list-item term="联系方式">{{detail.phoneNumber}}</detail-list-item>
                <detail-list-item term="邮箱">{{detail.email}}</detail-list-item>
                <detail-list-item term="联系地址">{{detail.address}}</detail-list-item>
              </detail-list>
              <a-divider style="margin-bottom: 32px"/>
              <detail-list title="建议内容" :col="1">
                <detail-list-item term="建议标题">{{detail.title}}</detail-list-item>
                <detail-list-item term="建议内容">
                  {{detail.content}}
                </detail-list-item>
                <detail-list-item term="附件">
                   <div v-for="(item,index) in detail.pictureList" :key="index">
                     <a :href="item.fileId|imgPath">{{item.name}}</a>
                   </div>
                </detail-list-item>
              </detail-list>
              <a-divider style="margin-bottom: 32px"/>
              <detail-list title="信息回复" :col="1">
                <a-form-model ref="ruleForm" :model="obj" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-form-model-item ref="replayInstitution" label="回复单位" prop="replayInstitution">
                    <a-input v-model="obj.replayInstitution" placeholder="请输入" defaultValue="陕西省陇县畜产局" @blur=" () => { $refs.replayInstitution.onFieldBlur(); } "/>
                  </a-form-model-item>
                  <a-form-model-item label="回复内容" prop="replayContent">
                    <a-input v-model="obj.replayContent" placeholder="请输入内容，1000字以内"  type="textarea" :maxLength="1000"></a-input>
                  </a-form-model-item>
                  <a-form-model-item label="是否公开信息" prop="publicType">
                    <a-radio-group v-model="obj.publicType">
                      <a-radio :value="0">
                        不公开
                      </a-radio>
                      <a-radio :value="1">
                        公开
                      </a-radio>
                    </a-radio-group>
                  </a-form-model-item>
                  <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" @click="onSubmit">
                      提交
                    </a-button>
                    <a-button style="margin-left: 10px;" @click="resetForm">
                      取消
                    </a-button>
                  </a-form-model-item>
                </a-form-model>
              </detail-list>

            </a-card>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import DetailList from "../../../components/tool/DetailList";
import {backlog} from '../../../services/index'
const DetailListItem = DetailList.Item
export default {
  name: "complaintReply",
  components: {DetailList, DetailListItem},
  data () {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      detail: {},
      obj:{
        replayInstitution: '陕西省陇县畜产局',
        replayContent: null,
        publicType: 0
      },
    rules: {
      replayInstitution: [
        { required: true, message: '请输入', trigger: 'blur' },
      ],
      replayContent: [
        { required: true,  message: '请输入', trigger: 'blur' },
        {max: 1000,  message: '最多只能输入1000字', trigger: 'blur' },
      ],
      publicType: [
        { required: true, message: '请选择', trigger: 'blur' },
      ],
    }
    }
  },
  created() {
    let id = this.$route.query.id
    this.getData(id)
  },
  methods:{
    getData (id) {
      backlog.getComplaintSuggestDetail(id, {}).then(res=>{
        this.detail = Object.assign({}, this.detail, res.data.data)
      })
    },
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          backlog.replyComplaintSuggest(this.detail.id, this.obj).then(()=>{
            // this.$message.success('操作成功');
            this.$router.go(-1)
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm() {
       this.$router.go(-1)
    },
  }
}
</script>

<style scoped>

</style>
